<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="bootstrap-datetimepicker.min.css">

    <script>
        // 删除行
        function removeTimeListRow() {
            let checkStatus = false
            var table = document.getElementById("time_list_data");
            for (var i = table.rows.length - 1; i > 0; i--) {
                if (i == 0){
                    continue;
                }
                var chkOrder = table.rows[i].cells[0].firstChild;
                if (chkOrder && chkOrder.checked) {
                    checkStatus = true
                    //执行删除
                    table.deleteRow(i);
                    var tableDataRowLength = table.tBodies[0].rows.length;
                    if (tableDataRowLength == 0) {
                        $('.del_time_list_row').hide()
                        $('#timeListFieldset').hide()
                        $(table).children('tbody').children().remove()
                        $(table).children('thead').children().remove()
                        resetTimeList()
                    }
                }
            }
            if (!checkStatus) {
                $.modal.msgWarning("至少选择一条数据")
                return
            }
        }
        // 添加行
        function addTimeListRow(){
            $('.del_time_list_row').show()
            $('#timeListFieldset').show()
            var table_data = document.getElementById("time_list_data");
            var tBodies = table_data.tBodies;
            var tbody = tBodies[0];
            let rows = tbody.rows.length
            // 向tbody的插入下一行
            var tr = tbody.insertRow(rows);

            var tds = table_data.rows[0].cells;//如果不是空表，首先获得表格有多少列，先获取再插入新行
            for (var i = 0; i < tds.length; i++) {//依次向新行插入表格列数的单元格
                var td = tr.insertCell(i);
                td.align='center'
                if (i == 0){
                    // 每行的第一列插入单选框
                    td.innerHTML = '<input type="checkbox" class="check_row common_class" onclick="checkTimeListRow(this)"/>';
                } else if (i == 1) {

                    td.innerHTML = '<div class="input-group date">' +
                        '<span class="input-group-addon"><i class="fa fa-calendar"></i></span>' +
                        '<input  class="form-control timeListCalendar" placeholder="选择时间：yyyy-MM" type="text" autocomplete="off">' +
                        '</div>'
                    $(".timeListCalendar").datetimepicker({
                        format: "yyyy-mm-dd",
                        minView: "month",
                        autoclose: true,
                        todayBtn: true
                    });
                    // 第三行插入事件
                } else if (i == 2) {
                    td.innerHTML = "<div contenteditable></div>";
                }
            }
            // "checked"属性设置为false，也就是取消选中该复选框。
            $('#check_time_list_all_row').prop('checked', false)
        }
        // 单选行
        function checkTimeListRow(event){
            let checkedStatus = event.checked
            if (checkedStatus == false){
                $('#check_time_list_all_row').prop('checked', false)
            } else {
                let checkBoxInput = $(event).parents("tbody").children('tr').children('td').children("input[type='checkbox']")
                let checkStatus = true
                checkBoxInput.each(function () {
                    let cruuCheckStatus = $(this)[0].checked
                    if (!cruuCheckStatus){
                        checkStatus = cruuCheckStatus
                    }
                })
                if (checkStatus){
                    $('#check_time_list_all_row').prop('checked', true)
                } else {
                    $('#check_time_list_all_row').prop('checked', false)
                }
            }
        }
        // 全选行
        function checkTimeListAllRow(event){
            let checkedStatus = event.checked
            let checkBoxInput = $(event).parents("thead").next("tbody").children('tr').children('td').children("input[type='checkbox']")
            checkBoxInput.each(function () {
                $(this).prop('checked', checkedStatus)
            })
        }
        // 重置表格
        function resetTimeList(){
            var title =
                '<tr>'
                +'	<td bgcolor="#eff3f8" align="center" name="Num" width="4%"><input type="checkbox" class="common_class" id="check_time_list_all_row" onclick="checkTimeListAllRow(this)"/></td>'
                +'	<td bgcolor="#eff3f8" align="center" width="48%"><div class="table_header">时间</div></td>'
                +'	<td bgcolor="#eff3f8" align="center" width="48%"><div class="table_header">事件</div></td>'
                +'</tr>'
            $('#time_list_data').children('thead').append(title)
        }



        function getValue() {
            var table_data = document.getElementById('time_list_data');//获取表格信息
            var tBodies = table_data.tBodies;
            var tbody = tBodies[0];
            let rows = tbody.rows
            if (rows.length > 0){
                let trList = []
                for (const row of rows) {
                    let tds = row.cells
                    let tdList = []
                    for (let i = 0; i < tds.length; i++) {
                        if (i == 0){
                            continue;
                        } else if (i == 1) {
                            var input = tds[i].firstChild.lastChild
                            tdList.push(input.value)
                        } else if(i == 2) {
                            tdList.push($(tds[i].firstChild).text())
                        }
                    }
                    trList.push(tdList)
                }
                $('#timeList').val(JSON.stringify(trList))
            } else {
                $('#timeList').val('')
            }
            console.log($('#timeList').val())
        }
    </script>

</head>

<body>
<div class="row">
    <div class="col-sm-12 custem_table">
        <input id="timeList" name="time_list" type="hidden"/>
        <button type="button" class="btn btn-white btn-sm add_row" onclick="getValue()"><i class="fa fa-plus"> 增加</i></button>
        <button type="button" class="btn btn-white btn-sm add_row" onclick="addTimeListRow()"><i class="fa fa-plus"> 增加行</i></button>
        <button type="button" class="btn btn-white btn-sm del_time_list_row" onclick="removeTimeListRow(this)" style="display:none"><i class="fa fa-minus"> 删除行</i></button>
        <fieldset class="fieldset" id="timeListFieldset" style="display:none">
            <table class="time_list_data" id="time_list_data" bordercolor="#e5e6e7" border="1" cellpadding="2" width="100%">
                <thead>
                <tr>
                    <td bgcolor="#eff3f8" align="center" name="Num" width="4%"><input type="checkbox" class="common_class" id="check_time_list_all_row" onclick="checkTimeListAllRow(this)"/></td>
                    <td bgcolor="#eff3f8" align="center" width="48%"><div class="table_header">时间</div></td>
                    <td bgcolor="#eff3f8" align="center" width="48%"><div class="table_header">事件</div></td>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </fieldset>
    </div>
</div>


</body>
</html>

<!--<span class="treetable-indent"></span><span class="treetable-expander glyphicon glyphicon-chevron-down"></span>-->